<template>
	<view class="home">
		<u-navbar title="账单" placeholder left-icon-size="0">
			<template #right>
				<u-text text="记账" color="#0c9bf4" size="32rpx" @click="handleRoute('/pages/bill/newBill')"></u-text>
			</template>
		</u-navbar>
		<view class="u-flex-y-center u-m-t-20 u-p-b-20">
			<u-text text="全部账单" align="center" @click="handleBill" suffix-icon="/static/images/icon_down.png"
				iconStyle="width:24rpx;height:24rpx"></u-text>
			<u-text :text="params.month" suffix-icon="/static/images/icon_down.png" @click="changeTime"
				iconStyle="width:24rpx;height:24rpx" align="center"></u-text>
		</view>
		<view class="reacord-item u-flex-y-center" v-for="(item,index) in data.list" :key="item.id"
			@click="$u.route(`/pages/bill/billDetail?id=${item.id}`)">
			<u-image width="80rpx" height="80rpx"
				:src="item.in_out == 2?'/static/images/icon_zhi.png':'/static/images/icon_shou.png'" shape="circle"></u-image>
			<view class="u-flex-1 u-m-l-20">
				<view class="u-flex-y-center">
					<u-text :text="item.type_title" bold size="32rpx" color="#333"></u-text>
					<u-text :text="`${item.in_out==1?'+':'-'}${item.money}`" align="right" size="32rpx" bold
						color="#333"></u-text>
				</view>
				<view class="u-flex-y-center u-m-t-10">
					<u-text :text="item.account_time" size="24rpx" color="#999"></u-text>
					<view @click.stop v-if="item.status == 0">
						<u-text text="删除" align="right" size="24rpx" color="#999" prefix-icon="/static/images/icon_del.png"
							iconStyle="width:30rpx;height:30rpx" @click="_delAccountLog(item)"></u-text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-popup :show="data.show" @close="handleClose">
		<view class="popup">
			<u-text text="筛选" margin="30rpx " align="center"></u-text>
			<view class="popup-item">
				<u-text text="收支类型" margin="0 0 24rpx" color="#333"></u-text>
				<u-row>
					<u-col span="4">
						<view :class="['screen-item',params.in_out == 0?'screen-item-active':'']" @click="params.in_out = 0">
							全部
						</view>
					</u-col>
					<u-col span="4">
						<view :class="['screen-item',params.in_out == 1?'screen-item-active':'']" @click="params.in_out = 1">
							收入
						</view>
					</u-col>
					<u-col span="4">
						<view :class="['screen-item',params.in_out == 2?'screen-item-active':'']" @click="params.in_out = 2">
							支出
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="popup-item">
				<u-text text="交易类型" margin="0 0 24rpx" color="#333"></u-text>
				<u-row>
					<u-col span="4" v-for="(item,index) in data.typeList" :key="item.id">
						<view :class="['screen-item',params.type_id == item.id?'screen-item-active':'']" @click="changeType(item)">
							{{item.title}}
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="popup-item">
				<u-text text="工单" margin="0 0 24rpx" color="#333"></u-text>
				<view class="border-box u-flex-1 u-flex-y-center u-flex-between">
					<u-input placeholder="请输入工单名称搜索" :adjustPosition="false" v-model="params.order_name" border="none"></u-input>
					<u-image src="/static/images/icon_ss.png" width="76rpx" @click="searchOrder" height="48rpx"></u-image>
				</view>
			</view>
			<view class="u-flex-y-center u-flex-between u-p-t-30 u-p-b-30">
				<u-button color="#F5F5F5" customStyle="width:320rpx;height:80rpx;color:#000" @click="initParams">重置</u-button>
				<u-button color="#0C9BF4" customStyle="width:320rpx;height:80rpx" @click="comfirmLog">确认</u-button>
			</view>
		</view>
	</u-popup>
	<up-picker :show="data.searchShow" closeOnClickOverlay :columns="data.searchList" @cancel="data.searchShow = false"
		@confirm="confirmSearch" keyName="name"></up-picker>
	<up-datetime-picker :show="data.timeShow" :formatter="formatter" v-model="data.defaultTime" mode="year-month"
		@confirm="confirmTime" @cancel="changeTime"></up-datetime-picker>
	<up-tabbar :value="'bill'" activeColor="#0C9BF4" inactiveColor="#BFBFBF">
		<up-tabbar-item text="首页" icon="/static/images/icon_gd.png"
			@click="handleClick('/pages/index/index')"></up-tabbar-item>
		<up-tabbar-item text="记账" name="bill" icon="/static/images/icon_bill_y.png"></up-tabbar-item>
		<up-tabbar-item text="统计" v-if="userInfo.group_id == 1" icon="/static/images/icon_tj.png"
			@click="handleClick('/pages/statistics/statistics')"></up-tabbar-item>
		<up-tabbar-item text="我的" icon="/static/images/icon_wd.png"
			@click="handleClick('/pages/mine/mine')"></up-tabbar-item>
	</up-tabbar>
</template>
<script setup>
	import { getCache, prefixURL } from '../../util/util';
	import { timeFormat } from 'uview-plus';
	import { onMounted, ref } from "vue";
	import { onReachBottom, onShow } from '@dcloudio/uni-app'
	import { accountType, delAccountLog, logList, searchOrderList, secondType } from "../../config/api";
	const data = ref({
		show: false,
		current: 1,
		list: [],
		timeShow: false,
		defaultTime: Number(new Date()),
		typeList: [],
		searchShow: false,
		searchList: []
	});
	const params = ref({
		month: timeFormat(new Date(), 'yyyy-mm'),
		in_out: 0, // 0是全部1是收入2是支出
		type_id: '', //二级账目类型id
		page: 1,
		order_name: '',
		order_id: ''
	})
	const userInfo = ref({})
	onShow(() => {
		uni.hideTabBar()
		_logList()
		_secondType(0)
		userInfo.value = getCache('userInfo')
	})
	onReachBottom(() => {
		params.value.page++
		_logList()
	})

	const confirmSearch = (row) => {
		params.value.order_name = row.value[0].name
		params.value.order_id = row.value[0].id
		data.value.searchShow = false
	}
	const searchOrder = () => {
		let value = params.value.order_name
		if (!value) data.value.searchShow = false
		else {
			searchOrderList({ keywords: params.value.order_name }).then(res => {
				if (!res.data.length) uni.$u.toast('没有查到此工单')
				else {
					data.value.searchList = [res.data]
					data.value.searchShow = true
				}
			})
		}
	}

	const handleClick = (page) => {
		uni.switchTab({
			url: page
		})
	}

	const comfirmLog = () => {
		params.value.page = 1
		data.value.show = false
		_logList()
	}
	const changeType = (item, level) => {
		params.value.type_id = item.id
		// if (level == 1) _accountType(item.id, level)
	}
	// 删除账单
	const _delAccountLog = (item) => {
		uni.showModal({
			content: '确定删除此帐单吗？',
			success: (res) => {
				if (res.confirm) {
					delAccountLog({
						log_id: item.id
					}).then(res => {
						uni.$u.toast(res.msg)
						_logList()
					})
				}
			}
		})
	}
	// 账单类型
	const _secondType = () => {
		secondType({}).then(res => {
			data.value.typeList = res.data
		})
	}
	// 重置
	const initParams = () => {
		params.value = {
			month: timeFormat(new Date(), 'yyyy-mm'),
			in_out: 0, // 0是全部1是收入2是支出
			type_id: '', //二级账目类型id
			page: 1,
			order_id: '',
			order_name: ''
		}
		data.value.show = false
		_logList()
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		return value;
	};
	// 确认时间选择
	const confirmTime = (row) => {
		params.value.month = uni.$u.timeFormat(row.value, 'yyyy-mm')
		data.value.timeShow = false
		_logList()
	}
	// 选择时间
	const changeTime = () => {
		data.value.timeShow = !data.value.timeShow
	}
	// 账单列表
	const _logList = () => {
		logList(params.value).then(res => {
			console.log(res)
			if (params.value.page == 1) data.value.list = res.data.list
			else data.value.list = [...data.value.list, ...res.data.list]
		})
	}
	const handleRoute = (page) => {
		uni.$u.route(page)
	}
	const handleBill = () => {
		data.value.show = !data.value.show
	}
	const handleClose = () => {
		data.value.show = !data.value.show
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		padding: 0 30rpx;
	}

	.reacord-item {
		padding: 20rpx 0;
	}

	.popup {
		padding: 0 36rpx;

		.screen-item {
			width: 200rpx;
			height: 72rpx;
			border-radius: 12rpx;
			background: #fafafa;
			font-size: 28rpx;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			text-align: center;
			line-height: 72rpx;
		}

		.screen-item-active {
			background: #D7F0FF;
			color: #0C9BF4;
		}
	}

	::v-deep .u-row {
		flex-wrap: wrap;
	}

	.border-box {
		padding: 16rpx 20rpx;
		background: #FAFAFA;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>